<template>
	<div class="cluster-performance">
		<el-card>
			<el-tabs v-model="activeTab" type="border-card" @tab-change="datetimerange = null">
				<el-tab-pane label="集群" name="cluster" lazy>
					<cluster />
				</el-tab-pane>
				<el-tab-pane label="节点" name="node" lazy>
					<node />
				</el-tab-pane>
				<el-tab-pane label="存储池" name="pool" lazy>
					<pool />
				</el-tab-pane>
				<el-tab-pane label="存储卷" name="volume" lazy>
					<volume />
				</el-tab-pane>
				<el-tab-pane label="文件系统" name="file" lazy>
					<file />
				</el-tab-pane>
				<el-tab-pane label="osd" name="osd" lazy>
					<osd />
				</el-tab-pane>
			</el-tabs>
			<div class="operation">
				<span>筛选范围：</span>
				<el-date-picker
					ref="dateRef"
					class="mr10"
					v-model="datetimerange"
					type="datetimerange"
					unlink-panels
					range-separator="-"
					start-placeholder="请选择开始时间"
					end-placeholder="请选择结束时间"
					value-format="YYYY-MM-DD HH:mm:ss"
					:shortcuts="shortcuts"
					@change="dateChange"
				/>
				<div v-show="latestTime" class="relative-time" @click="dateRef.focus()">{{ latestTime }}</div>
				<span>刷新间隔：</span>
				<el-select class="width-100 mr10" v-model="interval" @change="intervalChange">
					<el-option
						v-for="item in intervalOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
				<el-button type="primary" :disabled="!datetimerange" @click="restoreHandle">还原</el-button>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, getCurrentInstance, onUnmounted, provide, ref, watch } from 'vue';
import { useNodeApi } from '/@/api/node';
import { useStorageApi } from '/@/api/storage';
import { useBlockStorageApi } from '/@/api/block-storage';
import { Local } from '/@/utils/storage';
import { dayjs } from 'element-plus';
// Load relativeTime plug-in
import relativeTime from 'dayjs/plugin/relativeTime';
import { timeNameMap } from '/@/utils/const';
dayjs.extend(relativeTime);

const Cluster = defineAsyncComponent(() => import('./components/cluster.vue'));
const Node = defineAsyncComponent(() => import('./components/node.vue'));
const Pool = defineAsyncComponent(() => import('./components/pool.vue'));
const Volume = defineAsyncComponent(() => import('./components/volume.vue'));
const File = defineAsyncComponent(() => import('./components/file.vue'));
const Osd = defineAsyncComponent(() => import('./components/osd.vue'));

const { proxy } = <any>getCurrentInstance();
const nodeApi = useNodeApi();
const storageApi = useStorageApi();
const blockStorageApi = useBlockStorageApi();

const activeTab = ref('cluster');
provide('activeTab', activeTab);

// datetime change
const dateRef = ref();
const defaultdaterange = ref<[number, string]>([Number(Local.get('defaultdaterange')) || 60 * 60, 'second']);
const latestTime = ref('最近 ' + timeNameMap[dayjs(dayjs().subtract(defaultdaterange.value[0], 'second')).fromNow(true)]);
const datetimerange = ref();
const dateChange = (val:any) => {
	if (val) {
		if (dayjs(val[1]).diff(new Date(), 'second') == 0) {	// relative time range
			const diff = dayjs(val[1]).diff(val[0], 'second');
			defaultdaterange.value[0] = diff;
			Local.set('defaultdaterange', diff);
			datetimerange.value = null;
		} else {	// Filter time range
			datetimerange.value = val;
			latestTime.value = '';
		}
	} else {
		datetimerange.value = null;
	}
};
proxy.mittBus.on('change-range-time', dateChange);
provide('datetimerange', datetimerange);
provide('defaultdaterange', defaultdaterange);
const shortcuts = [
	{
		text: '最近 1 分钟',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 5 分钟',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 5 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 10 分钟',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 10 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 15 分钟',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 15 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 30 分钟',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 30 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 1 小时',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 60 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 3 小时',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3 * 60 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 6 小时',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 6 * 60 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 12 小时',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 12 * 60 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 1 天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 3 天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 3 * 24 * 60 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 7 天',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000);
			return [start, end];
		},
	},
	{
		text: '最近 1 个月',
		value: () => {
			const end = new Date();
			const start = new Date();
			start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
			return [start, end];
		},
	},
	// {
	// 	text: '最近 3 个月',
	// 	value: () => {
	// 		const end = new Date();
	// 		const start = new Date();
	// 		start.setTime(start.getTime() - 90 * 24 * 60 * 60 * 1000);
	// 		return [start, end];
	// 	},
	// },
	// {
	// 	text: '最近 6 个月',
	// 	value: () => {
	// 		const end = new Date();
	// 		const start = new Date();
	// 		start.setTime(start.getTime() - 180 * 24 * 60 * 60 * 1000);
	// 		return [start, end];
	// 	},
	// },
	// {
	// 	text: '最近 1 年',
	// 	value: () => {
	// 		const end = new Date();
	// 		const start = new Date();
	// 		start.setTime(start.getTime() - 365 * 24 * 60 * 60 * 1000);
	// 		return [start, end];
	// 	},
	// }
];

// Refresh interval
const interval = ref(Local.get('interval') || 5 * 1000);
const intervalOptions = [
	{ label: '5秒', value: 5 * 1000 },
	{ label: '10秒', value: 10 * 1000 },
	{ label: '15秒', value: 15 * 1000 },
	{ label: '30秒', value: 30 * 1000 },
	{ label: '1分钟', value: 60 * 1000 },
	{ label: '5分钟', value: 5 * 60 * 1000 },
	{ label: '10分钟', value: 10 * 60 * 1000 },
	{ label: '30分钟', value: 30 * 60 * 1000 },
	{ label: '1小时', value: 60 * 60 * 1000 },
];
provide('interval', interval);
const intervalChange = (val:number) => {
	interval.value = val;
	Local.set('interval', val);
};
// restore
const restoreHandle = () => {
	datetimerange.value = null;
};

const nodeList = ref([]);
provide('node-list', nodeList);
// get node list
nodeApi.nodeList({}).then((res:any) => {
	nodeList.value = res.data.records;
});

const poolList = ref([]);
provide('pool-list', poolList);
// get storage pool list
storageApi.getPoolList({ 'pageNo': 1, 'pageSize': 100 }).then((res:any) => {
	poolList.value = res.data.records;
});

const volumeList = ref([]);
provide('volume-list', volumeList);
// get storage volume list
blockStorageApi.getVolumeList({
	pageNo: 1,
	pageSize: 100
}).then((res:any) => {
	volumeList.value = res.data.records;
});

// Monitoring time range change
watch(
	datetimerange,
	val => {
		!val && (latestTime.value = '最近 ' + timeNameMap[dayjs(dayjs().subtract(defaultdaterange.value[0], 'second')).fromNow(true)]);
	},
);

onUnmounted(() => {
	proxy.mittBus.off('change-range-time', dateChange);
});
</script>
<style lang="scss" scoped>
.cluster-performance{
	height: calc(100vh - 160px);
    > :deep(.el-card){
		height: 100%;
		border: none;
		.el-card__body{
			height: 100%;
			padding: 10px;
			position: relative;
			.el-tabs{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				.el-tabs__content{
					height: calc(100% - 50px);
					padding-bottom: 5px;
					overflow-y: auto;
					.el-tab-pane{
						height: 100%;
						> div{
							height: 100%;
							/* Modify the header and content class styles in the tab-pane sub-components uniformly. It can also be customized in sub-components */
							.header{
								height: 40px;
								line-height: 40px;
								.el-form-item{
									margin: 0;
								}
								.el-loading-spinner{
									margin-top: 0;
									top: calc(50% - 12px);
									svg{
										height: 24px;
									}
								}
							}
							.content{
								height: calc(100% - 40px);
								display: flex;
								flex-wrap: wrap;
								justify-content: space-between;
								> .el-card,> div{
									width: calc((100% - 15px) / 2);
									height: calc((100% - 30px) / 2);
									margin-top: 15px;
								}
							}
						}
					}
				}
			}
			.operation{
				position: absolute;
				right: 10px;
				top: 4px;
				display: flex;
				align-items: center;
				.relative-time{
					width: 390px;
					height: 30px;
					position: absolute;
					top: 1px;
					right: 255px;
					background: #fff;
					line-height: 30px;
					text-align: center;
					cursor: pointer;
				}
			}
		}
	}
}
</style>